<template>
  <el-dialog title="登录/注册" :visible.sync="visible" v-if="visible">
    <h3 style="margin-bottom: 15px">首次登录即注册！</h3>
    <el-form ref="loginForm" :rules="rules" :model="formData" label-width="100px" @keydown.enter.native="submit">
      <el-form-item label="手机号" prop="phone">
        <el-input prefix-icon="el-icon-mobile-phone" v-model="formData.phone" placeholder="请输入手机号"/>
      </el-form-item>
      <el-form-item label="图片验证码" prop="code">
        <el-input v-model="formData.code" prefix-icon="el-icon-picture-outline" placeholder="请输入验证码" class="img-append">
          <template v-slot:append>
            <img style="display: block;height: 40px;width: 120px;" :src="kaptchaSrc" alt="图片验证码" title="点击切换验证码" @click="getKaptcha">
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="短信验证码" prop="smsCode">
        <el-input v-model="formData.smsCode" prefix-icon="el-icon-chat-line-round" placeholder="请输入验证码" class="msg-append">
          <template v-slot:append>
            <el-button type="primary" :disabled="btnDisabled" @click="sendMsg">{{ btnMsg }}</el-button>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">登录</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { uuid } from 'vue-uuid'

const formData = {
  uuid: '',
  code: '',
  phone: '',
  smsCode: '',
  smsUuid: ''
}
export default {
  name: 'LoginForm',
  data () {
    return {
      visible: false,
      formData: {
        ...formData
      },
      kaptchaSrc: '',
      rules: {
        phone: [{
          required: true,
          message: '手机号不能为空'
        }, {
          pattern: /^1[0-9]{10}$/,
          message: '手机号码格式错误'
        }],
        code: [{
          required: true,
          message: '图片验证码不能为空'
        }],
        smsCode: [{
          required: true,
          message: '短信验证码不能为空'
        }]
      },
      btnDisabled: false,
      btnMsg: '发送验证码',
      inter: ''
    }
  },
  methods: {
    getKaptcha () {
      this.formData.uuid = uuid.v4()
      this.kaptchaSrc = process.env.VUE_APP_URL + 'kaptcha.jpg?uuid=' + this.formData.uuid
    },
    submit () {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          const submitData = {
            phone: this.formData.phone,
            uuid: this.formData.smsUuid,
            code: this.formData.smsCode
          }
          this.$http.post('api/v1/phone/login', submitData).then(data => {
            if (data) {
              const date = new Date()
              date.setHours(date.getHours() + 6 + 8)
              this.$cookies.set('api-token', data, date)
              this.$emit('loginSuccess')
              this.visible = false
            }
          }).catch(() => {})
        }
      })
    },
    sendMsg () {
      if (!this.formData.phone) {
        this.$message.error('请输入手机号')
        return false
      }
      if (!(/^1[0-9]{10}$/.test(this.formData.phone))) {
        this.$message.error('手机号格式错误！')
        return false
      }
      if (!this.formData.code) {
        this.$message.error('请输入图片验证码')
        return false
      }
      this.$http.get('api/v1/send/msm', this.formData).then(data => {
        if (data) {
          this.formData.smsUuid = data
          this.$message.success('短信发送成功！')
          this.btnDisabled = true
          let s = 59
          this.btnMsg = `${s}秒后重试`
          this.inter = setInterval(() => {
            s--
            this.btnMsg = `${s}秒后重试`
            if (s === 0) {
              clearInterval(this.inter)
              this.btnDisabled = false
              this.btnMsg = '发送验证码'
            }
          }, 1000)
        }
      }).catch(() => {})
    },
    init () {
      this.visible = true
      this.formData = { ...formData }
      this.getKaptcha()
    }
  }
}
</script>

<style scoped>

</style>
<style>
.img-append .el-input-group__append{
  height: 40px;
  width: 120px;
  padding: 0;
  border: none;
}
.msg-append .el-button--primary {
  color: #FFF !important;
  background-color: #409EFF !important;
  border-color: #409EFF !important;
}
.msg-append .el-button--primary.is-disabled{
  color: #FFF !important;
  background-color: #a0cfff !important;
  border-color: #a0cfff !important;
}
</style>
